//😎😎总体目标:制作6张图--动态变化

//首先获取数据


//根据数据进行渲染6张图
function getData(url) {
  return axios({ url })
}

async function updatePage() {
  //💕💕💕💕💕💕💕 todo  定时器
  // setInterval(async function () {
  try {
    //chart1
    const data1 = await getData('http://8.138.119.204:8182/api/trend?type=map')
    console.log(data1);
    console.log(data1.data.data);
    chart1(data1.data.data)
    //chart2
    const data2 = await getData('http://8.138.119.204:8182/api/seller')
    console.log(data2.data.data);
    chart2(data2.data.data)
    //chart3
    const data3 = await getData('http://8.138.119.204:8182/api/points')
    console.log(data3.data.data);
    chart3(data3.data.data)
    //chart4
    const data4 = await getData('http://8.138.119.204:8182/api/rank')
    console.log(data4.data.data);
    chart4(data4.data.data)
    //chart5
    const data5 = await getData('http://8.138.119.204:8182/api/commodity')
    console.log(data5.data.data);
    chart5(data5.data.data)
    //chart6
    const data6 = await getData('http://8.138.119.204:8182/api/stock')
    console.log(data6.data.data);
    chart6(data6.data.data)





  } catch (err) {
    alert(err)

  }
  // }, 1000)


}

updatePage()

//👌 左边两张:线形图,柱状图
//1.线形图
function chart1({ title, unit, xAxis, series }) {
  const myChart = echarts.init(document.querySelector('.left .areachart'));

  const option = {
    title: {

      subtext: `单位:${unit}`,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        //axisPointer.label. backgroundColor  = 'auto'
        label: {
          backgroundColor: 'rgba(0,0,0,0.3)'
        }
      }
    },
    legend: {
      textStyle: { color: 'white', fontSize: 10 },
      top: '8%',

    },
    grid: {
      left: '3%',
      right: '4%',

      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisTick: {
          show: false
        },
        data: xAxis
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: false
        }
      }
    ],
    series: series.map(ele => ({
      name: ele.name,
      type: 'line',
      stack: '总量',
      areaStyle: {},
      symbol: 'none',
      data: ele.data
    }))
    ,

  };

  myChart.setOption(option)

  window.addEventListener('resize', function () {
    myChart.resize()



  })
}


//2.柱状图
function chart2(data) {
  //排序--怎根据对象数组里面的value值进行排序
  // data.sort((a, b) => a.value - b.value)
  // console.log(data)
  // //然后取出data数组里面的后面5项数据
  // data = data.slice(7, 11)  splice
  // console.log(data)




  const myChart = echarts.init(document.querySelector('.left .bar'));

  const option = {

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine: {
        show: true
      }
    },
    yAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: 'white',
          fontSize: 8
        }
      },
      data: data.map(ele => ele.name)
    },
    series: [
      {
        name: '2011',
        type: 'bar',
        color: '#759aa0',
        label: {
          position: 'right',
          show: true,
          textStyle: {
            color: '#759aa0',
            fontSize: 12
          }
        },
        data: data.map(ele => ele.value)
      },

    ]
  };

  myChart.setOption(option)

  //实现

  //slice(i,i+5)   i+5>arr.length  

  window.addEventListener('resize', function () {
    myChart.resize()



  })
}




//👌 中间两张
//3.地图
function chart3(data) {
  const myChart = echarts.init(document.querySelector('.center .top'));

  var mapName = 'china'
  var data = [
    { name: "北京", value: 199 },
    { name: "天津", value: 42 },
    { name: "河北", value: 102 },
    { name: "山西", value: 81 },
    { name: "内蒙古", value: 47 },
    { name: "辽宁", value: 67 },
    { name: "吉林", value: 82 },
    { name: "黑龙江", value: 123 },
    { name: "上海", value: 24 },
    { name: "江苏", value: 92 },
    { name: "浙江", value: 114 },
    { name: "安徽", value: 109 },
    { name: "福建", value: 116 },
    { name: "江西", value: 91 },
    { name: "山东", value: 119 },
    { name: "河南", value: 137 },
    { name: "湖北", value: 116 },
    { name: "湖南", value: 114 },
    { name: "重庆", value: 91 },
    { name: "四川", value: 125 },
    { name: "贵州", value: 62 },
    { name: "云南", value: 83 },
    { name: "西藏", value: 9 },
    { name: "陕西", value: 80 },
    { name: "甘肃", value: 56 },
    { name: "青海", value: 10 },
    { name: "宁夏", value: 18 },
    { name: "新疆", value: 180 },
    { name: "广东", value: 123 },
    { name: "广西", value: 59 },
    { name: "海南", value: 14 },
  ];

  var geoCoordMap = {};
  var toolTipData = [
    { name: "北京", value: [{ name: "科技人才总数", value: 95 }, { name: "理科", value: 82 }] },
    { name: "天津", value: [{ name: "文科", value: 22 }, { name: "理科", value: 20 }] },
    { name: "河北", value: [{ name: "文科", value: 60 }, { name: "理科", value: 42 }] },
    { name: "山西", value: [{ name: "文科", value: 40 }, { name: "理科", value: 41 }] },
    { name: "内蒙古", value: [{ name: "文科", value: 23 }, { name: "理科", value: 24 }] },
    { name: "辽宁", value: [{ name: "文科", value: 39 }, { name: "理科", value: 28 }] },
    { name: "吉林", value: [{ name: "文科", value: 41 }, { name: "理科", value: 41 }] },
    { name: "黑龙江", value: [{ name: "文科", value: 35 }, { name: "理科", value: 31 }] },
    { name: "上海", value: [{ name: "文科", value: 12 }, { name: "理科", value: 12 }] },
    { name: "江苏", value: [{ name: "文科", value: 47 }, { name: "理科", value: 45 }] },
    { name: "浙江", value: [{ name: "文科", value: 57 }, { name: "理科", value: 57 }] },
    { name: "安徽", value: [{ name: "文科", value: 57 }, { name: "理科", value: 52 }] },
    { name: "福建", value: [{ name: "文科", value: 59 }, { name: "理科", value: 57 }] },
    { name: "江西", value: [{ name: "文科", value: 49 }, { name: "理科", value: 42 }] },
    { name: "山东", value: [{ name: "文科", value: 67 }, { name: "理科", value: 52 }] },
    { name: "河南", value: [{ name: "文科", value: 69 }, { name: "理科", value: 68 }] },
    { name: "湖北", value: [{ name: "文科", value: 60 }, { name: "理科", value: 56 }] },
    { name: "湖南", value: [{ name: "文科", value: 62 }, { name: "理科", value: 52 }] },
    { name: "重庆", value: [{ name: "文科", value: 47 }, { name: "理科", value: 44 }] },
    { name: "四川", value: [{ name: "文科", value: 65 }, { name: "理科", value: 60 }] },
    { name: "贵州", value: [{ name: "文科", value: 32 }, { name: "理科", value: 30 }] },
    { name: "云南", value: [{ name: "文科", value: 42 }, { name: "理科", value: 41 }] },
    { name: "西藏", value: [{ name: "文科", value: 5 }, { name: "理科", value: 4 }] },
    { name: "陕西", value: [{ name: "文科", value: 38 }, { name: "理科", value: 42 }] },
    { name: "甘肃", value: [{ name: "文科", value: 28 }, { name: "理科", value: 28 }] },
    { name: "青海", value: [{ name: "文科", value: 5 }, { name: "理科", value: 5 }] },
    { name: "宁夏", value: [{ name: "文科", value: 10 }, { name: "理科", value: 8 }] },
    { name: "新疆", value: [{ name: "文科", value: 36 }, { name: "理科", value: 31 }] },
    { name: "广东", value: [{ name: "文科", value: 63 }, { name: "理科", value: 60 }] },
    { name: "广西", value: [{ name: "文科", value: 29 }, { name: "理科", value: 30 }] },
    { name: "海南", value: [{ name: "文科", value: 8 }, { name: "理科", value: 6 }] },
  ];

  /*获取地图数据*/
  myChart.showLoading();
  var mapFeatures = echarts.getMap(mapName).geoJson.features;
  myChart.hideLoading();
  mapFeatures.forEach(function (v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;

  });

  // console.log(data)
  // console.log(toolTipData)
  var max = 480,
    min = 9; // todo 
  var maxSize4Pin = 100,
    minSize4Pin = 20;

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        });
      }
    }
    return res;
  };
  const option = {
    tooltip: {
      padding: 0,
      enterable: true,
      transitionDuration: 1,
      textStyle: {
        color: '#000',
        decoration: 'none',
      },
      // position: function (point, params, dom, rect, size) {
      //   return [point[0], point[1]];
      // },
      // formatter: function (params) {
      //   // console.log(params)
      //   var tipHtml = '';
      //   tipHtml = '<div style="width:280px;height:180px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
      //     + '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' + '</i>'
      //     + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
      //     + '<div style="padding:20px">'
      //     + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
      //     + '单位总数：' + '<span style="color:#11ee7d;margin:0 6px;">' + toolTipData.length + '</span>' + '个' + '</p>'
      //     + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
      //     + '总人数：' + '<span style="color:#f48225;margin:0 6px;">' + toolTipData.length + '</span>' + '个' + '</p>'
      //     + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
      //     + '总人数：' + '<span style="color:#f4e925;margin:0 6px;">' + toolTipData.length + '</span>' + '个' + '</p>'
      //     + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
      //     + '总人数：' + '<span style="color:#25f4f2;margin:0 6px;">' + toolTipData.length + '</span>' + '个' + '</p>'
      //     + '</div>' + '</div>';
      //   setTimeout(function () {
      //     tooltipCharts(params.name);
      //   }, 10);
      //   return tipHtml;
      // }

    },

    visualMap: {
      show: true,
      min: 0,
      max: 200,
      left: '10%',
      top: 'bottom',
      calculable: true,
      seriesIndex: [1],
      inRange: {
        color: ['#04387b', '#467bc0'] // 蓝绿
      }
    },
    geo: {
      show: true,
      map: mapName,
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: false,
        }
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#023677',
          borderColor: '#1180c7',
        },
        emphasis: {
          areaColor: '#4499d0',
        }
      }
    },
    series: [{
      name: '散点',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: convertData(data),
      symbolSize: function (val) {
        return val[2] / 10;
      },
      label: {
        normal: {
          formatter: '{b}',
          position: 'right',
          show: true
        },
        emphasis: {
          show: true
        }
      },
      itemStyle: {
        normal: {
          color: '#fff'
        }
      }
    },
    {
      type: 'map',
      map: mapName,
      geoIndex: 0,
      aspectScale: 0.75, //长宽比
      showLegendSymbol: false, // 存在legend时显示
      label: {
        normal: {
          show: true
        },
        emphasis: {
          show: false,
          textStyle: {
            color: '#fff'
          }
        }
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: '#031525',
          borderColor: '#3B5077',
        },
        emphasis: {
          areaColor: '#2B91B7'
        }
      },
      animation: false,
      data: data
    },
    {
      name: '点',
      type: 'scatter',
      coordinateSystem: 'geo',
      zlevel: 6,
    },
    {
      name: 'Top 5',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: convertData(data.sort(function (a, b) {
        return b.value - a.value;
      }).slice(0, 10)),
      symbolSize: function (val) {
        return val[2] / 10;
      },
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
        normal: {
          formatter: '{b}',
          position: 'left',
          show: false
        }
      },
      itemStyle: {
        normal: {
          color: 'yellow',
          shadowBlur: 10,
          shadowColor: 'yellow'
        }
      },
      zlevel: 1
    },

    ]
  };

  myChart.setOption(option)

  window.addEventListener('resize', function () {
    myChart.resize()



  })
}




//4.动态柱状图
function chart4(data) {
  //处理数据,对data对象数组进行item.value从大到小排序
  data.sort((a, b) => b.value - a.value)
  console.log(data);
  //接下来就是将这些数据通过柱状图展示到页面上,同时动态,前面删除一个,后面就添加一个


  const myChart = echarts.init(document.querySelector('.center .bottom'));

  const option = {
    color: ['#9fde9a'],
    title: {
      text: '销售金额(万)'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: data.slice(0, 11).map(ele => ele.name),
        axisTick: {
          show: false,
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '销售金额',
        type: 'bar',
        barWidth: 10,
        barCategoryGap: '20%',
        data: data.slice(0, 11).map(ele => ele.value)
      }
    ]
  };

  myChart.setOption(option)
  //设置动态效果
  let i = 0
  setInterval(function () {

    i++
    //理一下边界值--0  arr.length-12     arr.length-1
    //0 11  
    // 1 12
    // 9  20
    // 10 ------最大index 20   length  21
    //当i大于data的长度时,重置i为0
    if (i > data.length - 11) {
      i = 0
    }
    //按顺序切片11个数据



    //修改xAxis的值
    option.xAxis[0].data = data.slice(i, i + 11).map(ele => ele.name)


    //修改series的值
    option.series[0].data = data.slice(i, i + 11).map(ele => ele.value)
    myChart.setOption(option)


  }, 2100)



  window.addEventListener('resize', function () {
    myChart.resize()



  })
}








//👌右边两张
//5.饼状图
function chart5(data) {
  const myChart = echarts.init(document.querySelector('.right .chart'));

  const option = {
    title: [{
      text: data[0].name,
      textStyle: {
        fontSize: 14,
        color: 'white'
      },
      left: '5%',
      bottom: '10%'
    }, {
      text: data[1].name,
      textStyle: {
        fontSize: 14,
        color: 'white'
      },
      left: '35%',
      bottom: '10%'
    }, {
      text: data[2].name,
      textStyle: {
        fontSize: 14,
        color: 'white'
      },
      left: '65%',
      bottom: '10%'
    }],
    tooltip: {
      trigger: 'item'
    },

    series: [
      {
        name: data[0].name,
        type: 'pie',
        radius: '30%',
        center: ['20%', '50%'],
        data: data[0].children.map(ele => {
          return {
            value: ele.value,
            name: ele.name
          }
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          fontSize: 4
        },
        labelLine: {
          length: 5, length2: 8, lineStyle: { width: 1 }
        }
      }, {
        name: data[1].name,
        type: 'pie',
        radius: '30%',
        center: ['50%', '50%'],
        data: data[1].children.map(ele => {
          return {
            value: ele.value,
            name: ele.name
          }
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }, label: {
          fontSize: 4
        },
        labelLine: {
          length: 5, length2: 8, lineStyle: { width: 1 }
        }
      }, {
        name: data[2].name,
        type: 'pie',
        radius: '30%',
        center: ['80%', '50%'],
        data: data[2].children.map(ele => {
          return {
            value: ele.value,
            name: ele.name
          }
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }, label: {
          fontSize: 4
        },
        labelLine: {
          length: 5, length2: 8, lineStyle: { width: 1 }
        }
      }
    ]
  };

  myChart.setOption(option)

  window.addEventListener('resize', function () {
    myChart.resize()



  })
}







//6.仪表盘--5张
function chart6(data) {
  const myChart = echarts.init(document.querySelector('.right .ybp'));

  const option = {
    series: [
      {
        type: 'gauge',
        startAngle: 240,
        endAngle: -60,
        center: ['17%', '28%'],
        radius: '50%',
        min: 0,
        max: data[0].stock,
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            width: 2,
            color: [
              [0.2, '#FF6E76'],
              [0.8, '#FDDD60'],
              // [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ]
          }
        },
        pointer: {
          // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '10%',
          showAbove: true,
          icon: 'diamond',
          // icon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
          width: 30,
          // offsetCenter: [0, '30%'],
          itemStyle: {
            color: 'green'
          }
        },
        axisTick: {
          length: 4,
          lineStyle: {
            color: [
              [0.2, '#91ca8c'],
              [0.8, '#FDDD60'],
              // [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ],
            width: 0.5
          },
          distance: 0
        },
        splitLine: {
          length: 6,
          lineStyle: {
            color: 'auto',
            width: 1
          }, distance: 0
        },
        axisLabel: {
          color: 'white',
          fontSize: 4,
          distance: 8,
          rotate: 'tangential',
          // formatter: function (value) {
          //   if (value === 0.875) {
          //     return 'Grade A';
          //   } else if (value === 0.625) {
          //     return 'Grade B';
          //   } else if (value === 0.375) {
          //     return 'Grade C';
          //   } else if (value === 0.125) {
          //     return 'Grade D';
          //   }
          //   return '';
          // }
        },
        title: {
          offsetCenter: [0, '-30%'],

          // fontSize: 10
          textStyle: {
            color: 'white',
            fontSize: 5,
            fontWeight: 'bold'
          },
        },
        detail: {
          fontSize: 8,
          offsetCenter: [0, '35%'],
          valueAnimation: true,
          // formatter: function (value) {
          //   return Math.round(value * 100) + '';
          // },
          color: 'inherit'
        },
        data: [
          {
            value: data[0].sales,
            name: data[0].name
          }
        ]
      }, {
        type: 'gauge',
        startAngle: 240,
        endAngle: -60,
        center: ['50%', '28%'],
        radius: '50%',
        min: 0,
        max: data[1].stock,
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            width: 2,
            color: [
              [0.2, '#FF6E76'],
              [0.8, '#FDDD60'],
              // [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ]
          }
        },
        pointer: {
          // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '10%',
          showAbove: true,
          icon: 'diamond',
          // icon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
          width: 30,
          // offsetCenter: [0, '30%'],
          itemStyle: {
            color: 'green'
          }
        },
        axisTick: {
          length: 4,
          lineStyle: {
            color: [
              [0.2, '#91ca8c'],
              [0.8, '#FDDD60'],
              // [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ],
            width: 0.5
          },
          distance: 0
        },
        splitLine: {
          length: 6,
          lineStyle: {
            color: 'auto',
            width: 1
          }, distance: 0
        },
        axisLabel: {
          color: 'white',
          fontSize: 4,
          distance: 8,
          rotate: 'tangential',
          // formatter: function (value) {
          //   if (value === 0.875) {
          //     return 'Grade A';
          //   } else if (value === 0.625) {
          //     return 'Grade B';
          //   } else if (value === 0.375) {
          //     return 'Grade C';
          //   } else if (value === 0.125) {
          //     return 'Grade D';
          //   }
          //   return '';
          // }
        },
        title: {
          offsetCenter: [0, '-30%'],

          // fontSize: 10
          textStyle: {
            color: 'white',
            fontSize: 5,
            fontWeight: 'bold'
          },
        },
        detail: {
          fontSize: 8,
          offsetCenter: [0, '35%'],
          valueAnimation: true,
          // formatter: function (value) {
          //   return Math.round(value * 100) + '';
          // },
          color: 'inherit'
        },
        data: [
          {
            value: data[1].sales,
            name: data[1].name
          }
        ]
      }, {
        type: 'gauge',
        startAngle: 240,
        endAngle: -60,
        center: ['83%', '28%'],
        radius: '50%',
        min: 0,
        max: data[2].stock,
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            width: 2,
            color: [
              [0.2, '#FF6E76'],
              [0.8, '#FDDD60'],
              // [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ]
          }
        },
        pointer: {
          // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '10%',
          showAbove: true,
          icon: 'diamond',
          // icon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
          width: 30,
          // offsetCenter: [0, '30%'],
          itemStyle: {
            color: 'green'
          }
        },
        axisTick: {
          length: 4,
          lineStyle: {
            color: [
              [0.2, '#91ca8c'],
              [0.8, '#FDDD60'],
              // [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ],
            width: 0.5
          },
          distance: 0
        },
        splitLine: {
          length: 6,
          lineStyle: {
            color: 'auto',
            width: 1
          }, distance: 0
        },
        axisLabel: {
          color: 'white',
          fontSize: 4,
          distance: 8,
          rotate: 'tangential',
          // formatter: function (value) {
          //   if (value === 0.875) {
          //     return 'Grade A';
          //   } else if (value === 0.625) {
          //     return 'Grade B';
          //   } else if (value === 0.375) {
          //     return 'Grade C';
          //   } else if (value === 0.125) {
          //     return 'Grade D';
          //   }
          //   return '';
          // }
        },
        title: {
          offsetCenter: [0, '-30%'],

          // fontSize: 10
          textStyle: {
            color: 'white',
            fontSize: 5,
            fontWeight: 'bold'
          },
        },
        detail: {
          fontSize: 8,
          offsetCenter: [0, '35%'],
          valueAnimation: true,
          // formatter: function (value) {
          //   return Math.round(value * 100) + '';
          // },
          color: 'inherit'
        },
        data: [
          {
            value: data[2].sales,
            name: data[2].name
          }
        ]
      }, {
        type: 'gauge',
        startAngle: 240,
        endAngle: -60,
        center: ['30%', '75%'],
        radius: '50%',
        min: 0,
        max: data[3].stock,
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            width: 2,
            color: [
              [0.2, '#FF6E76'],
              [0.8, '#FDDD60'],
              // [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ]
          }
        },
        pointer: {
          // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '10%',
          showAbove: true,
          icon: 'diamond',
          // icon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
          width: 30,
          // offsetCenter: [0, '30%'],
          itemStyle: {
            color: 'green'
          }
        },
        axisTick: {
          length: 4,
          lineStyle: {
            color: [
              [0.2, '#91ca8c'],
              [0.8, '#FDDD60'],
              // [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ],
            width: 0.5
          },
          distance: 0
        },
        splitLine: {
          length: 6,
          lineStyle: {
            color: 'auto',
            width: 1
          }, distance: 0
        },
        axisLabel: {
          color: 'white',
          fontSize: 4,
          distance: 8,
          rotate: 'tangential',
          // formatter: function (value) {
          //   if (value === 0.875) {
          //     return 'Grade A';
          //   } else if (value === 0.625) {
          //     return 'Grade B';
          //   } else if (value === 0.375) {
          //     return 'Grade C';
          //   } else if (value === 0.125) {
          //     return 'Grade D';
          //   }
          //   return '';
          // }
        },
        title: {
          offsetCenter: [0, '-30%'],

          // fontSize: 10
          textStyle: {
            color: 'white',
            fontSize: 5,
            fontWeight: 'bold'
          },
        },
        detail: {
          fontSize: 8,
          offsetCenter: [0, '35%'],
          valueAnimation: true,
          // formatter: function (value) {
          //   return Math.round(value * 100) + '';
          // },
          color: 'inherit'
        },
        data: [
          {
            value: data[3].sales,
            name: data[3].name
          }
        ]
      }, {
        type: 'gauge',
        startAngle: 240,
        endAngle: -60,
        center: ['70%', '75%'],
        radius: '50%',
        min: 0,
        max: data[4].stock,
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            width: 2,
            color: [
              [0.2, '#FF6E76'],
              [0.8, '#FDDD60'],
              // [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ]
          }
        },
        pointer: {
          // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '10%',
          showAbove: true,
          icon: 'diamond',
          // icon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
          width: 30,
          // offsetCenter: [0, '30%'],
          itemStyle: {
            color: 'green'
          }
        },
        axisTick: {
          length: 4,
          lineStyle: {
            color: [
              [0.2, '#91ca8c'],
              [0.8, '#FDDD60'],
              // [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ],
            width: 0.5
          },
          distance: 0
        },
        splitLine: {
          length: 6,
          lineStyle: {
            color: 'auto',
            width: 1
          }, distance: 0
        },
        axisLabel: {
          color: 'white',
          fontSize: 4,
          distance: 8,
          rotate: 'tangential',
          // formatter: function (value) {
          //   if (value === 0.875) {
          //     return 'Grade A';
          //   } else if (value === 0.625) {
          //     return 'Grade B';
          //   } else if (value === 0.375) {
          //     return 'Grade C';
          //   } else if (value === 0.125) {
          //     return 'Grade D';
          //   }
          //   return '';
          // }
        },
        title: {
          offsetCenter: [0, '-30%'],

          // fontSize: 10
          textStyle: {
            color: 'white',
            fontSize: 5,
            fontWeight: 'bold'
          },
        },
        detail: {
          fontSize: 8,
          offsetCenter: [0, '35%'],
          valueAnimation: true,
          // formatter: function (value) {
          //   return Math.round(value * 100) + '';
          // },
          color: 'inherit'
        },
        data: [
          {
            value: data[4].sales,
            name: data[4].name
          }
        ]
      }
    ]
  };

  myChart.setOption(option)

  window.addEventListener('resize', function () {
    myChart.resize()



  })
}